<!DOCTYPE html>
<html>
	<!--创建钱包2-->
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>登陆</title>
		<link rel="stylesheet" type="text/css" href="skin/css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="skin/css/animate.css"/>
		<style type="text/css">
			#app{
				width: 100%;
				height: 100%;
				padding: 0;
			}
			.top{
				display: flex;
				align-items: flex-end;
				height: 60px;
				padding-bottom: 10px;
				background: #3573FA;
			}
			.top>span{
				flex: 1 1 0;
			}
			.top>span:nth-of-type(1){
				text-indent: 15px;
			}
			.top>span:nth-of-type(2){
				font-size: 17px;
				text-align: center;
				color: white;
			}
			.top>span:nth-of-type(3){
				display: flex;
				justify-content: flex-end;
				padding-right: 15px;
				
			}
			.hea{
				position: relative;
				top:0;
				width: 100%;
				height: 100px;
				background: url(skin/img/cre-wal-bg.png);
				background-size: 100% 100%;
			}
			.hea > h3{
				padding:2px 0;
				color: white;
				text-align: center;
				font-size: 23px;
			}
			.hea>.logo{
				position: absolute;
				bottom: -40px;
				width: 100%;
				height: 80px;
				background: url(skin/img/logo.png) no-repeat center center;
				background-size: 80px 80px;
			}
			#wallet-wrap{
				padding: 0 50px;
				margin-top: 55px;
			}
			#wallet-wrap >p>input{
				width: 100%;
				height: 50px;
				border-bottom: 1px solid #333333;
				color: #333333;
				opacity: .5;
			}
			#wallet-wrap .agree{
				display: flex;
				padding: 15px 0;
				opacity: .5;
			}
			#wallet-wrap .agree > p:first-of-type{
				height: 20px;
				width:20px;
				margin-right: 8px;
			}
			#wallet-wrap .agree > p.chan-no{
				background: url(skin/img/chan-no.png) no-repeat center center;
				background-size:100% 100% ;
			}
			#wallet-wrap .agree > p.chan-yes{
				background: url(skin/img/chan-yes.png) no-repeat center center;
				background-size:100% 100% ;
			}
			#wallet-wrap .agree > p:last-of-type{
				line-height: 20px;
			}
			#wallet-wrap >button{
				display: block;
				width: 100%;
				height: 30px;
				margin: 10px 0;
				text-align: center;
				border-radius: 20px;
				border: none;
				outline: none;
			}
			#wallet-wrap >button:first-of-type{
				margin-top:30px;
				background: #3573FA;
				color: white;
			}
			#wallet-wrap >button:last-of-type{
				background: transparent;
				color:#3573FA;
			}
		</style>
	</head>
	
	
	<body>
		<div id="app">
			<div class="top">
				<span @click='plus.webview.currentWebview().close()'>
					<img src="skin/img/icon-back.png" width="12px" height="20px"/>
				</span>
				<span></span>
				<span></span>
			</div>
			<!-- <div id="" style='height: 75px;background: #3573FA;' v-if='offTop'></div> -->
			<div class='hea'>
				<h3>创建钱包</h3>
				<div class='logo'></div>
			</div>
			<div id="wallet-wrap" @click='offTop=true'>
				<p>
					<input type="text" placeholder="钱包名称" v-model='inputInfo.name' />
				</p>
				<p>
					<input type="password" placeholder="密码" v-model='inputInfo.pas1'/>
				</p>
				<p>
					<input type="password" placeholder="重复密码" v-model='inputInfo.pas2' />
				</p>
				<p>
					<input type="text" placeholder="密码提示信息（可不填）" v-model='inputInfo.pasNotice' />
				</p>
				<p>
					<input type="text" placeholder="邀请码（必填）" v-model='inputInfo.invaCode' />
				</p>
				<div class='agree' @click.stop="checked=!checked">
					<transition
						enter-active-class='animated bounceIn'
					>
						<p class='chan-no' v-if='!checked'></p>
					</transition>
					<transition
						enter-active-class='animated bounceIn'
					>
						<p class='chan-yes' v-if='checked'></p>
					</transition>
					<p>我已经仔细阅读并同意  <span style='color:#3573FA'>服务及隐私条款</span></p>
				</div>
				<button @click='creMon'>创建钱包</button>
				<button @click='impMon'>导入钱包</button>
			</div>
		</div>
		<script src="skin/js/back.js">
		<script src='skin/js/jquery-3.3.1.min.js'></script>
		<script src="skin/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="skin/js/comm.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app=new Vue({
				el:'#app',
				data:{
					offTop:false,
					checked:false,//默认没阅读并同意
					inputInfo:{
						name:'',//钱包名称
						pas1:'',//密码
						pas2:'',//确认密码
						pasNotice:'',//密码提示信息
						invaCode:'',//邀请码
					}
				},
				methods:{
					//创建钱包
					creMon:function(){
						//删除
						var style=viewTitle(true,'#3573fa','备份助记词','#ffffff');  
						plus.webview.open( 'backup-words.html', 'backupWords' ,style,'slide-in-right');
						return ;
						//删除
						if(!this.inputInfo.name){
							toast('请输入钱包名称');
							return ;
						}
						if(!this.inputInfo.pas1){
							toast('请输入密码');
							return ;
						}
						if(this.inputInfo.pas1!=this.inputInfo.pas2){
							toast('两次密码输入不一致');
							return ;
						}
						if(!this.inputInfo.invaCode){
							toast('请输入邀请码');
							return ;
						}
						if(!this.checked){
							toast('同意服务及隐私条款才能进行创建钱包');
							return ;
						}
						var style=viewTitle(true,'#3573fa','备份助记词','#ffffff');  
						plus.webview.open( 'backup-words.html', 'backupWords' ,style,'slide-in-right');
					},
					//导入钱包
					impMon:function(){
						plus.webview.open('import-wallet.html','importWallet',{},'slide-in-right');
					}
				}
			});
		</script>
	</body>
</html>


